Jupyter 博文发布教程
如何在 fastpages 上发布 ipynb 格式的博文
- 基本设置
- FrontMatter
- 格式
- 可视化显示
- 图片
- 其它亮点
- Tweet 卡片
- Youtube 视频
- Callouts
- 脚注
- 其它亮点
- Tweet 卡片
- Youtube 视频
- Callouts
- 脚注
FrontMatter
FrontMatter 位于每篇 notebook 中的第一个 cell 中,其作用是每篇博文的配置文件,它控制着每篇博文该如何展现内容。
markdown
# Title
> Awesome summary
- toc:true- branch: master
- badges: true
- comments: true
- author: Hamel Husain & Jeremy Howard
- categories: [fastpages, jupyter]
有关 FrontMatter 的详细配置和说明可以参考 fastpages 说明
在 cell 开头如果加上 #collapse-hide ,fastpages会默认折叠该细胞,但可以手动展开
在 cell 开头如果加上 #collapse-show ,fastpages会默认展开该细胞,但可以手动折叠
#collapse-hide
import pandas as pd
import plotly.express as px
from IPython.display import HTML
#collapse-show
cars = 'https://vega.github.io/vega-datasets/data/cars.json'
movies = 'https://vega.github.io/vega-datasets/data/movies.json'
sp500 = 'https://vega.github.io/vega-datasets/data/sp500.csv'
stocks = 'https://vega.github.io/vega-datasets/data/stocks.csv'
flights = 'https://vega.github.io/vega-datasets/data/flights-5k.json'
可视化显示
在 fastpages 官网 中介绍了如何用 Altair 显示可交互图表的操作,
其实不只 Altair, fastapages 支持多种可视化框架。
需要注意的是,在最后显示阶段需要用 HTML(fig.to_html()) 代替平常 fig.show()
print(px.data.iris.__doc__)
px.data.iris().head()
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", marginal_y="rug", marginal_x="histogram")
HTML(fig.to_html())
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
size="pop", color="continent", hover_name="country", facet_col="continent",
log_x=True, size_max=45, range_x=[100,100000], range_y=[25,90])
HTML(fig.to_html())
df = px.data.election()
fig = px.line_3d(df, x="Joly", y="Coderre", z="Bergeron", color="winner", line_dash="winner")
HTML(fig.to_html())
![]()


Tweet 卡片
输入 > twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20 显示如下信息
Altair 4.0 is released! https://t.co/PCyrIOTcvv
— Jake VanderPlas (@jakevdp) December 11, 2019
Try it with:
pip install -U altair
The full list of changes is at https://t.co/roXmzcsT58 ...read on for some highlights. pic.twitter.com/vWJ0ZveKbZ
Callouts
输入 > Warning: There will be no second warning! 显示如下信息
输入 > Important: Pay attention! It's important. 显示如下信息
输入 > Tip: This is my tip. 显示如下信息
输入 > Note: Take note of this. 显示如下信息
脚注
jupyter notebook 中脚注与 markdown 中的脚注有所区别,详细参见这篇文章 This guide provides more detail about this syntax
For example, here is a footnote {% fn 1 %}.
And another {% fn 2 %}
{{ 'This is the footnote.' | fndetail: 1 }}
{{ 'This is the other footnote. You can even have a [link](www.github.com)!' | fndetail: 2 }}
For example, here is a footnote 1.
And another 2
1. This is the footnote.↩
![]()


Tweet 卡片
输入 > twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20 显示如下信息
Altair 4.0 is released! https://t.co/PCyrIOTcvv
— Jake VanderPlas (@jakevdp) December 11, 2019
Try it with:
pip install -U altair
The full list of changes is at https://t.co/roXmzcsT58 ...read on for some highlights. pic.twitter.com/vWJ0ZveKbZ
Callouts
输入 > Warning: There will be no second warning! 显示如下信息
输入 > Important: Pay attention! It's important. 显示如下信息
输入 > Tip: This is my tip. 显示如下信息
输入 > Note: Take note of this. 显示如下信息
脚注
jupyter notebook 中脚注与 markdown 中的脚注有所区别,详细参见这篇文章 This guide provides more detail about this syntax
For example, here is a footnote {% fn 1 %}.
And another {% fn 2 %}
{{ 'This is the footnote.' | fndetail: 1 }}
{{ 'This is the other footnote. You can even have a [link](www.github.com)!' | fndetail: 2 }}
For example, here is a footnote 1.
And another 2
1. This is the footnote.↩
